<template>
  <div class="ranking-intro">
    <div class="ranking-intro-container">
      <div class="page-header">
        <h1>金山学院牛人榜</h1>
        <div class="breadcrumb">
          <router-link to="/">首页</router-link> &gt; 金山学院牛人榜
        </div>
      </div>
      
      <div class="intro-content">
        <div class="intro-section">
          <h2>牛人榜简介</h2>
          <p>金山学院牛人榜是我校为表彰在学术研究、科技创新、专业竞赛等方面表现突出的优秀学生而设立的荣誉榜单。每学年评选一次，旨在激励学生勇攀学术高峰，锐意创新进取，为学校创造更多荣誉。</p>
          <p>牛人榜分为"最强王者"、"技术达人"、"AI先锋"、"潜力之星"、"安全卫士"、"数据能手"和"创新先锋"等多个奖项类别，全面覆盖计算机科学、软件工程、人工智能、网络安全等多个专业领域，激励不同专业背景的学生在各自领域追求卓越。</p>
        </div>
        
        <div class="intro-section">
          <h2>评选标准</h2>
          <div class="criteria-box">
            <div class="criteria-item">
              <div class="criteria-title">学术成就</div>
              <div class="criteria-desc">在国家级、省级学科竞赛中获奖；发表高质量学术论文；参与重要科研项目</div>
            </div>
            <div class="criteria-item">
              <div class="criteria-title">创新能力</div>
              <div class="criteria-desc">技术创新成果；专利申请；开源项目贡献；解决实际问题的创新方案</div>
            </div>
            <div class="criteria-item">
              <div class="criteria-title">专业技能</div>
              <div class="criteria-desc">专业领域技术精湛；获得权威认证；在行业内有一定影响力</div>
            </div>
            <div class="criteria-item">
              <div class="criteria-title">综合素养</div>
              <div class="criteria-desc">团队协作能力；表达沟通能力；责任感与担当精神；学习力与成长潜力</div>
            </div>
          </div>
        </div>
        
        <div class="intro-section">
          <h2>奖项设置</h2>
          <div class="awards">
            <div class="award-item" v-for="(award, index) in awards" :key="index">
              <div class="award-icon">{{ award.icon }}</div>
              <div class="award-info">
                <div class="award-name">{{ award.name }}</div>
                <div class="award-desc">{{ award.description }}</div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="intro-section">
          <h2>历届优秀代表</h2>
          <p>金山学院牛人榜自设立以来，已有数十位优秀学生入选。这些学生在校期间表现突出，毕业后也在各自领域取得了显著成就，成为学校的骄傲。他们中有的进入国内外知名企业担任技术骨干，有的继续深造攻读硕士、博士学位，有的创业开辟自己的事业道路，都为学校争得了荣誉。</p>
          
          <div class="action-buttons">
            <router-link to="/ranking" class="action-button primary">查看本届牛人榜</router-link>
            <a href="javascript:;" class="action-button secondary">申请评选</a>
            <a href="javascript:;" class="action-button debug" @click="resetFirstVisit" title="重置首次访问状态（仅用于开发测试）">重置动画</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RankingIntroView',
  data() {
    return {
      awards: [
        { 
          icon: '👑',
          name: '最强王者', 
          description: '授予在学术研究、科技创新等方面表现最为突出，达到国家级水平的顶尖学生，是牛人榜的最高荣誉' 
        },
        { 
          icon: '🔮',
          name: '技术达人', 
          description: '授予在某一技术领域有深入研究和突出贡献，技术实力强劲的学生' 
        },
        { 
          icon: '🤖',
          name: 'AI先锋', 
          description: '授予在人工智能、机器学习、深度学习等方向有创新成果的学生' 
        },
        { 
          icon: '⭐',
          name: '潜力之星', 
          description: '授予虽然尚处学习阶段，但表现出强大潜力和发展前景的低年级学生' 
        },
        { 
          icon: '🛡️',
          name: '安全卫士', 
          description: '授予在网络安全、信息安全领域有特殊贡献或技术专长的学生' 
        },
        { 
          icon: '📊',
          name: '数据能手', 
          description: '授予在数据科学、大数据分析、数据挖掘等方面有独特见解和实践能力的学生' 
        },
        { 
          icon: '💡',
          name: '创新先锋', 
          description: '授予有创新思维，在创新创业比赛中表现突出或有自主创业经历的学生' 
        }
      ]
    }
  },
  methods: {
    resetFirstVisit() {
      localStorage.removeItem('hasVisitedRanking');
      alert('已重置首次访问状态！下次进入排行榜将显示完整动画。');
    }
  }
}
</script>

<style scoped>
.ranking-intro-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.page-header {
  margin-bottom: 30px;
  border-bottom: 2px solid #c22;
  padding-bottom: 15px;
}

.page-header h1 {
  color: #333;
  font-size: 28px;
  margin-bottom: 10px;
}

.breadcrumb {
  font-size: 14px;
  color: #666;
}

.breadcrumb a {
  color: #c22;
  text-decoration: none;
}

.intro-content {
  background-color: #fff;
  border-radius: 5px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.intro-section {
  margin-bottom: 30px;
}

.intro-section h2 {
  color: #3a6ea5;
  font-size: 22px;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.intro-section p {
  line-height: 1.8;
  color: #333;
  margin-bottom: 15px;
  text-align: justify;
}

.criteria-box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 20px 0;
}

.criteria-item {
  width: 48%;
  background-color: #f5f9ff;
  padding: 20px;
  border-radius: 5px;
  margin-bottom: 15px;
  border-left: 4px solid #3a6ea5;
}

.criteria-title {
  font-size: 18px;
  font-weight: bold;
  color: #3a6ea5;
  margin-bottom: 10px;
}

.criteria-desc {
  color: #555;
  line-height: 1.6;
}

.awards {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.award-item {
  display: flex;
  background-color: #f9f9f9;
  padding: 15px;
  border-radius: 5px;
  border-left: 4px solid #ffd700;
  align-items: center;
}

.award-icon {
  font-size: 2.5em;
  margin-right: 20px;
  width: 60px;
  text-align: center;
}

.award-info {
  flex: 1;
}

.award-name {
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
  font-size: 18px;
}

.award-desc {
  color: #666;
  line-height: 1.5;
}

.action-buttons {
  display: flex;
  gap: 20px;
  margin-top: 30px;
  justify-content: center;
}

.action-button {
  padding: 12px 25px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  text-align: center;
  transition: all 0.3s ease;
}

.action-button.primary {
  background: linear-gradient(45deg, #3a6ea5, #2a5282);
  color: white;
  box-shadow: 0 5px 15px rgba(42, 82, 130, 0.3);
}

.action-button.secondary {
  background: #f9f9f9;
  color: #3a6ea5;
  border: 2px solid #3a6ea5;
}

.action-button.debug {
  background: #f9f9f9;
  color: #999;
  border: 2px dashed #ccc;
  font-size: 0.9em;
  padding: 8px 15px;
}

.action-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.action-button.primary:hover {
  background: linear-gradient(45deg, #2a5282, #3a6ea5);
}

.action-button.secondary:hover {
  background: #f0f0f0;
}

.action-button.debug:hover {
  background: #f0f0f0;
  color: #666;
}

@media (max-width: 768px) {
  .criteria-item {
    width: 100%;
  }
  
  .action-buttons {
    flex-direction: column;
  }
}
</style> 